์ทจ์ฝ์ ์ผ๋ก๋ถํฐ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณดํธํ๊ณ ๋ฐ์ดํฐ ๋ฌด๊ฒฐ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ์ฝ๋ ๊ฒฉ๋ฆฌ ์ ๋ต์ ํฌํจํ JavaScript ๋ชจ๋ ๋ณด์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ดํด๋ณด์ธ์.
JavaScript ๋ชจ๋ ๋ณด์: ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ์ฝ๋ ๊ฒฉ๋ฆฌ ์ ๋ต
์ค๋๋ ์ ์ํธ ์ฐ๊ฒฐ๋ ์ธ์์์ JavaScript๋ ๋ค์ํ ์ง๋ฆฌ์ ์์น์ ๋ฌธํ์ ๋ฐฐ๊ฒฝ์ ๊ฐ์ง ์ฌ์ฉ์์๊ฒ ์๋น์ค๋ฅผ ์ ๊ณตํ๋ ๊ด๋ฒ์ํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ ฅ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ฌํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณต์ก์ฑ์ด ์ฆ๊ฐํจ์ ๋ฐ๋ผ ๊ฐ๋ ฅํ ๋ณด์ ์กฐ์น์ ์ค์์ฑ๋ ์ปค์ง๊ณ ์์ต๋๋ค. JavaScript ๋ณด์์ ์ค์ํ ์ธก๋ฉด ์ค ํ๋๋ ์ ์ฌ์ ์ธ ์ทจ์ฝ์ ์ ์ํฅ์ ์ต์ํํ๊ธฐ ์ํด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ๋ฌ ๋ถ๋ถ์ ๋ถ๋ฆฌํ๋ ์ฝ๋ ๊ฒฉ๋ฆฌ์ ๋๋ค. ์ด ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์์๋ JavaScript ๋ชจ๋์ ๋ณด์์ ํฌ๊ฒ ํฅ์์ํค๊ณ ์ ์ธ๊ณ์ ์ผ๋ก ์ฌ์ฉ์์ ๋ฐ์ดํฐ๋ฅผ ๋ณดํธํ ์ ์๋ ๋ค์ํ ์ฝ๋ ๊ฒฉ๋ฆฌ ์ ๋ต์ ์์ธํ ์ค๋ช ํฉ๋๋ค.
์ฝ๋ ๊ฒฉ๋ฆฌ๊ฐ ์ค์ํ ์ด์
์ฝ๋ ๊ฒฉ๋ฆฌ๋ ์ ์ฑ ์ฝ๋๊ฐ ํ์ฐ๋์ด ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ ์์์ํค๋ ๊ฒ์ ๋ฐฉ์งํ๋ ๋ฐ ๋์์ด ๋๋ ๊ธฐ๋ณธ์ ์ธ ๋ณด์ ์์น์ ๋๋ค. ๋ชจ๋์ ๊ฒฉ๋ฆฌํจ์ผ๋ก์จ ํน์ ์์ญ์์ ์ทจ์ฝ์ ์ด ์ ์ฉ๋ ๊ฒฝ์ฐ ์ ์ฌ์ ์์์ ๋ฒ์๋ฅผ ์ ํํ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ์ ๋ช ๊ฐ์ง ์ฃผ์ ์ด์ ์ ์ ๊ณตํฉ๋๋ค.
- ๊ณต๊ฒฉ ํ๋ฉด ๊ฐ์: ๋ชจ๋์ ๊ฒฉ๋ฆฌํจ์ผ๋ก์จ ๊ณต๊ฒฉ์๊ฐ ์ ์ฉํ ์ ์๋ ์ง์ ์ ์๋ฅผ ์ ํํฉ๋๋ค.
- ๊ฒฐํจ ํ์ฉ ๋ฅ๋ ฅ ํฅ์: ํ ๋ชจ๋์ด ์คํจํ๊ฑฐ๋ ์์๋ ๊ฒฝ์ฐ ์ ์ฒด ์ ํ๋ฆฌ์ผ์ด์ ์ด ๋ค์ด๋ ๊ฐ๋ฅ์ฑ์ด ์ค์ด๋ญ๋๋ค.
- ์ ์ง ๊ด๋ฆฌ์ฑ ํฅ์: ๋ชจ๋ ๊ฐ์ ๋ช ํํ ๊ฒฝ๊ณ๋ ์ฝ๋๋ฒ ์ด์ค๋ฅผ ๋ ์ฝ๊ฒ ์ดํดํ๊ณ , ์ ์ง ๊ด๋ฆฌํ๊ณ , ๋๋ฒ๊น ํ ์ ์๋๋ก ํฉ๋๋ค.
- ๊ถํ ๋ถ๋ฆฌ: ์๋ก ๋ค๋ฅธ ๋ชจ๋์ด ์๋ก ๋ค๋ฅธ ๊ถํ ์์ค์ผ๋ก ์๋ํ๋๋ก ํ์ฉํ์ฌ ์์๋ ๋ฎ์ ๊ถํ ๋ชจ๋์ด ๋ฐ์์ํฌ ์ ์๋ ํผํด๋ฅผ ์ ํํฉ๋๋ค.
์ผ๋ฐ์ ์ธ JavaScript ๋ชจ๋ ์์คํ ๋ฐ ๋ณด์ ๊ณ ๋ ค ์ฌํญ
JavaScript๋ ๋ณด์ ์ธก๋ฉด์์ ์์ฒด์ ์ธ ๊ฐ์ ๊ณผ ์ฝ์ ์ ๊ฐ์ง ์ฌ๋ฌ ๋ชจ๋ ์์คํ ์ ์ ๊ณตํฉ๋๋ค.
1. ์ ์ญ ๋ฒ์(๊ณผ๊ฑฐ)
๋ชจ๋ ์์คํ ์ด ๋๋ฆฌ ์ฑํ๋๊ธฐ ์ ์ JavaScript ์ฝ๋๋ ์ข ์ข ์ ์ญ ๋ฒ์๋ก ์์ฑ๋์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ์ฌ๊ฐํ ๋ณด์ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ๋ชจ๋ ์คํฌ๋ฆฝํธ๋ ๋ค๋ฅธ ์คํฌ๋ฆฝํธ์ ๋ณ์์ ํจ์์ ์ก์ธ์คํ์ฌ ์์ ํ ์ ์์ผ๋ฏ๋ก ์ถฉ๋๊ณผ ์ทจ์ฝ์ ์ด ๋ฐ์ํ ์ ์์ต๋๋ค. ์ ์ฑ ์คํฌ๋ฆฝํธ๊ฐ ์ฃผ์ ๋๋ฉด ์ค์ํ ํจ์๋ฅผ ์ฝ๊ฒ ๋ฎ์ด์ฐ๊ฑฐ๋ ๋ฏผ๊ฐํ ๋ฐ์ดํฐ๋ฅผ ํ์น ์ ์์ต๋๋ค. ์ด๋ค ๋๊ฐ๋ฅผ ์น๋ฅด๋๋ผ๋ ์ด ์ ๊ทผ ๋ฐฉ์์ ํผํ์ญ์์ค.
2. ์ฆ์ ํธ์ถ ํจ์ ํํ์(IIFE)
IIFE๋ ๋ณ์์ ํจ์์ ๋ํ ๊ฐ์ธ ๋ฒ์๋ฅผ ์์ฑํ์ฌ ๊ธฐ๋ณธ์ ์ธ ์์ค์ ์ฝ๋ ๊ฒฉ๋ฆฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ฆ์ ์ ์๋๊ณ ์คํ๋๋ ํจ์์ ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด IIFE ๋ด์์ ์ ์ธ๋ ๋ณ์๊ฐ ์ ์ญ ๋ฒ์๋ฅผ ์ค์ผ์ํค๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค.
์์:
(function() {
var privateVariable = "secret";
window.myModule = {
getSecret: function() {
return privateVariable;
}
};
})();
console.log(myModule.getSecret()); // Output: secret
console.log(privateVariable); // Output: undefined (because it's private)
IIFE๋ ์ด๋ ์ ๋ ๊ฒฉ๋ฆฌ๋ฅผ ์ ๊ณตํ์ง๋ง ์ข ์์ฑ ๊ด๋ฆฌ๋ฅผ ์ฒ๋ฆฌํ์ง ์๊ฑฐ๋ ๋ค๋ฅธ ๋ชจ๋์์ ๊ธฐ๋ฅ์ ๊ฐ์ ธ์ค๊ณ ๋ด๋ณด๋ด๋ ๋ช ํํ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ง ์์ต๋๋ค. ์ด๋ `window` ๊ฐ์ฒด(๋๋ ์ ์ฌํ ์ ์ญ ๊ฐ์ฒด)์ ๊ธฐ๋ฅ์ ์ฐ๊ฒฐํ๋ ๋ฐ ์์กดํ๋ฏ๋ก ์ด๋ฆ ์ถฉ๋ ๋ฐ ์ ์ฌ์ ๋ณด์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
3. CommonJS(Node.js)
CommonJS๋ ์ฃผ๋ก Node.js ํ๊ฒฝ์์ ์ฌ์ฉ๋๋ ๋ชจ๋ ์์คํ ์ ๋๋ค. `require()` ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋์ ๊ฐ์ ธ์ค๊ณ `module.exports` ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ๊ธฐ๋ฅ์ ๋ด๋ณด๋ ๋๋ค.
์์:
// moduleA.js
const secretKey = "verySecretKey";
exports.encrypt = function(data) {
// Encryption logic using secretKey
return data.split('').reverse().join(''); // Dummy encryption for example
};
// moduleB.js
const moduleA = require('./moduleA');
const encryptedData = moduleA.encrypt("Sensitive Data");
console.log(encryptedData);
CommonJS๋ ๊ฐ ๋ชจ๋์ ์์ฒด ๋ฒ์๊ฐ ์๊ธฐ ๋๋ฌธ์ IIFE๋ณด๋ค ๋ ๋์ ๊ฒฉ๋ฆฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฌ๋ CommonJS๋ ๋๊ธฐ์์ด๋ฏ๋ก ๋ชจ๋์ด ์์ฐจ์ ์์๋ก ๋ก๋๋๊ณ ์คํ๋ฉ๋๋ค. ์ด๋ ํนํ ๋๊ท๋ชจ ๋ชจ๋์ ์ฒ๋ฆฌํ ๋ ๋ธ๋ผ์ฐ์ ์์ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ผ๊ธฐํ ์ ์์ต๋๋ค. ๋ํ ํ์ผ ์์ค์์ ๊ฒฉ๋ฆฌํ๋ ๋์ `require`๋ ํ ๋ชจ๋์ ์ทจ์ฝ์ ์ด ์ฌ์ ํ ์ฃผ ๋ชจ๋์ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค.
4. ๋น๋๊ธฐ์ ๋ชจ๋ ์ ์(AMD)
AMD๋ ๋ธ๋ผ์ฐ์ ์์ ๋น๋๊ธฐ์ ๋ชจ๋ ๋ก๋ฉ์ ์ํด ์ค๊ณ๋์์ต๋๋ค. `define()` ํจ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ชจ๋์ ์ ์ํ๊ณ ์ข ์์ฑ์ ์ง์ ํฉ๋๋ค. RequireJS๋ AMD์ ์ธ๊ธฐ ์๋ ๊ตฌํ์ ๋๋ค.
์์:
// moduleA.js
define(function() {
const secretKey = "verySecretKey";
return {
encrypt: function(data) {
// Encryption logic using secretKey
return data.split('').reverse().join(''); // Dummy encryption for example
}
};
});
// moduleB.js
define(['./moduleA'], function(moduleA) {
const encryptedData = moduleA.encrypt("Sensitive Data");
console.log(encryptedData);
});
AMD๋ ๋ชจ๋์ ๋น๋๊ธฐ์์ผ๋ก ๋ก๋ํ์ฌ ๋ธ๋ผ์ฐ์ ํ๊ฒฝ์์ CommonJS์ ๋นํด ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค. ๋ํ ๋ชจ๋ ๊ธฐ๋ฐ ๊ตฌ์กฐ๋ก ์ธํด ์ข์ ์ฝ๋ ๊ฒฉ๋ฆฌ๋ฅผ ์ ๊ณตํฉ๋๋ค. ๊ทธ๋ฌ๋ ๊ตฌ๋ฌธ์ ๋ค๋ฅธ ๋ชจ๋ ์์คํ ๋ณด๋ค ๋ ์ฅํฉํ ์ ์์ต๋๋ค.
5. ECMAScript ๋ชจ๋(ESM)
ESM์ JavaScript์ ๋ด์ฅ๋ ํ์คํ๋ ๋ชจ๋ ์์คํ ์ ๋๋ค. `import` ๋ฐ `export` ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ์ข ์์ฑ์ ๊ด๋ฆฌํฉ๋๋ค. ESM์ ์ต์ ๋ธ๋ผ์ฐ์ ๋ฐ Node.js(์ผ๋ถ ๊ตฌ์ฑ ํฌํจ)์์ ์ง์๋ฉ๋๋ค.
์์:
// moduleA.js
const secretKey = "verySecretKey";
export function encrypt(data) {
// Encryption logic using secretKey
return data.split('').reverse().join(''); // Dummy encryption for example
}
// moduleB.js
import { encrypt } from './moduleA.js';
const encryptedData = encrypt("Sensitive Data");
console.log(encryptedData);
ESM์ ์ ์ ๋ถ์(์ค๋ฅ ์กฐ๊ธฐ ๊ฐ์ง ์ง์), ํธ๋ฆฌ ์์ดํน(์ฌ์ฉํ์ง ์๋ ์ฝ๋ ์ ๊ฑฐํ์ฌ ๋ฒ๋ค ํฌ๊ธฐ ์ค์ด๊ธฐ) ๋ฐ ๋น๋๊ธฐ์ ๋ก๋ฉ์ ํฌํจํ์ฌ ๋ช ๊ฐ์ง ์ด์ ์ ์ ๊ณตํฉ๋๋ค. ๋ํ ๊ฐ ๋ชจ๋์ ์์ฒด ๋ฒ์๊ฐ ์๊ณ ์ข ์์ฑ์ด ๋ช ์์ ์ผ๋ก ์ ์ธ๋์ด ์๊ธฐ ๋๋ฌธ์ ํ์ํ ์ฝ๋ ๊ฒฉ๋ฆฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
๋ชจ๋ ์์คํ ์ธ์ ์ฝ๋ ๊ฒฉ๋ฆฌ ์ ๋ต
์ฌ๋ฐ๋ฅธ ๋ชจ๋ ์์คํ ์ ์ ํํ๋ ๊ฒ์ด ์ค์ํ์ง๋ง ๋ณด์์ ๊ฐํํ๊ธฐ ์ํด ์ถ๊ฐ ์ฝ๋ ๊ฒฉ๋ฆฌ ์ ๋ต์ ๊ตฌํํ ์ ์์ต๋๋ค.
1. ์ต์ ๊ถํ ์์น
์ด ์์น์ ๊ฐ ๋ชจ๋์ด ์์ ์ ์ํํ๋ ๋ฐ ํ์ํ ์ต์ ๊ถํ ์์ค๋ง ๊ฐ์ ธ์ผ ํ๋ค๊ณ ๋ช ์ํฉ๋๋ค. ๋ชจ๋์ ๋ถํ์ํ ๊ถํ์ ๋ถ์ฌํ์ง ๋ง์ญ์์ค. ์๋ฅผ ๋ค์ด ๋ฐ์ดํฐ๋ฅผ ํ์ํ๋ ๋ชจ๋์ ๋ฏผ๊ฐํ ์ฌ์ฉ์ ์ ๋ณด๋ ๊ด๋ฆฌ ๊ธฐ๋ฅ์ ์ก์ธ์คํ ์ ์์ด์ผ ํฉ๋๋ค.
์์: ์ฌ์ฉ์๊ฐ ํ์ผ์ ์ ๋ก๋ํ ์ ์๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ณ ๋ คํด ๋ณด์ญ์์ค. ํ์ผ ์ ๋ก๋๋ฅผ ๋ด๋นํ๋ ๋ชจ๋์ ์๋ฒ์์ ์์์ ์ฝ๋๋ฅผ ์คํํ ์ ์๋ ๊ถํ์ด ์์ด์ผ ํฉ๋๋ค. ์ง์ ๋ ๋๋ ํฐ๋ฆฌ์ ์ ๋ก๋๋ ํ์ผ์ ์ ์ฅํ๊ณ ๊ธฐ๋ณธ์ ์ธ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ํํ ์๋ง ์์ด์ผ ํฉ๋๋ค.
2. ์ ๋ ฅ ์ ํจ์ฑ ๊ฒ์ฌ ๋ฐ ์ญ์
๋ชจ๋ ์ฌ์ฉ์ ์ ๋ ฅ์ ์ฒ๋ฆฌํ๊ธฐ ์ ์ ํญ์ ์ ํจ์ฑ์ ๊ฒ์ฌํ๊ณ ์ญ์ ํ์ญ์์ค. ์ด๋ XSS(Cross-Site Scripting) ๋ฐ SQL ์ฝ์ (JavaScript๊ฐ ๋ฐฑ์๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ํธ ์์ฉํ๋ ๊ฒฝ์ฐ)๊ณผ ๊ฐ์ ๋ค์ํ ์ ํ์ ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค. ์ ๋ ฅ ์ ํจ์ฑ ๊ฒ์ฌ๋ ๋ฐ์ดํฐ๊ฐ ์์ ํ์ ๋ฐ ๋ฒ์์ ๋ถํฉํ๋์ง ํ์ธํ๋ ๋ฐ๋ฉด ์ญ์ ๋ ์ ์ฌ์ ์ผ๋ก ์ ์ฑ ๋ฌธ์๋ฅผ ์ ๊ฑฐํ๊ฑฐ๋ ์ธ์ฝ๋ฉํฉ๋๋ค.
์์: ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ์ ๋ํ ์ฌ์ฉ์ ์ ์ถ ํ ์คํธ๋ฅผ ์๋ฝํ ๋ XSS ๊ณต๊ฒฉ์ ๋ฐฉ์งํ๊ธฐ ์ํด HTML ํ๊ทธ๋ฅผ ํํฐ๋งํ๊ณ ํน์ ๋ฌธ์๋ฅผ ์ด์ค์ผ์ดํํฉ๋๋ค. DOMPurify์ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ HTML ์ฝํ ์ธ ๋ฅผ ์ญ์ ํ์ญ์์ค.
3. ์ฝํ ์ธ ๋ณด์ ์ ์ฑ (CSP)
CSP๋ ์น ํ์ด์ง๊ฐ ๋ก๋ํ ์ ์๋ ๋ฆฌ์์ค๋ฅผ ์ ์ดํ ์ ์๋ ๋ธ๋ผ์ฐ์ ๋ณด์ ๋ฉ์ปค๋์ฆ์ ๋๋ค. ์๊ฒฉํ CSP๋ฅผ ์ ์ํ์ฌ ๋ธ๋ผ์ฐ์ ๊ฐ ์ธ๋ผ์ธ ์คํฌ๋ฆฝํธ๋ฅผ ์คํํ๊ณ , ์ ๋ขฐํ ์ ์๋ ์์ค์์ ๋ฆฌ์์ค๋ฅผ ๋ก๋ํ๊ณ , ๊ธฐํ ์ ์ฌ์ ์ผ๋ก ์ํํ ์์ ์ ์ํํ๋ ๊ฒ์ ๋ฐฉ์งํ ์ ์์ต๋๋ค. ์ด๋ XSS ๊ณต๊ฒฉ์ ์ํํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
์์: CSP ํค๋๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค: `Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com; style-src 'self' https://example.com; img-src 'self' data:`
์ด ์ ์ฑ ์ ํ์ด์ง์์ ๋์ผํ ์ถ์ฒ(`'self'`)์์ ๋ฆฌ์์ค๋ฅผ ๋ก๋ํ๊ณ `https://example.com`์์ ์คํฌ๋ฆฝํธ ๋ฐ ์คํ์ผ์ ๋ก๋ํ ์ ์๋๋ก ํ์ฉํฉ๋๋ค. ์ด๋ฏธ์ง๋ ๋์ผํ ์ถ์ฒ ๋๋ ๋ฐ์ดํฐ URI๋ก ๋ก๋ํ ์ ์์ต๋๋ค. ๋ค๋ฅธ ์ถ์ฒ์ ๋ค๋ฅธ ๋ชจ๋ ๋ฆฌ์์ค๋ ์ฐจ๋จ๋ฉ๋๋ค.
4. ์๋ธ ๋ฆฌ์์ค ๋ฌด๊ฒฐ์ฑ(SRI)
SRI๋ฅผ ์ฌ์ฉํ๋ฉด ํ์ฌ CDN(์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ)์์ ๋ก๋ํ๋ ํ์ผ์ด ์์๋์ง ์์๋์ง ํ์ธํ ์ ์์ต๋๋ค. `